import React, { useState, useEffect } from 'react';
import { Card } from 'antd';
import { Pie } from '@ant-design/charts';
import { getSatisfactionStatistics } from '@/services/GovernmentTrain/GovernmentTrain';
import styles from './index.less';

type SatisfyDataType = {
  type: string;
  value: number;
};
const SatisfyAnalysis: React.FC = () => {
  const [satisfyData, setSatisfyData] = useState<SatisfyDataType[]>([]);
  useEffect(() => {
    getSatisfactionStatistics()
      .then((resp) => {
        console.log('Statistics resp ===', resp);
        if (resp?.results) {
          const { results } = resp;
          setSatisfyData([
            { type: '比较满意', value: results.quiteSatisfiedCount },
            {
              type: '满意',
              value: results.satisfiedCount,
            },
            {
              type: '不满意',
              value: results.dissatisfiedCount,
            },
          ]);
        }
      })
      .catch((error) => {
        console.log('getSatisfaction error', error);
      });
  }, []);

  console.log('satisfyData===', satisfyData);

  const config = {
    appendPadding: 10,
    data: satisfyData,
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
    legend: {
      layout: 'horizontal',
      position: 'bottom',
    },
    color: ['#2589E7', '#5EB298', '#F49226'],
    height: 170,
    label: {
      type: 'inner',
      offset: '-30%',
      content: function content(_ref: { percent: any }) {
        const { percent } = _ref;
        return ''.concat((percent * 100).toFixed(0), '%');
      },
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    },
    interactions: [{ type: 'element-active' }],
  };

  return (
    <Card title="满意度统计" className={styles.analysisCard}>
      <Pie {...config} />
    </Card>
  );
};

export default SatisfyAnalysis;
